<html>
	<head>
		<meta charset="utf-8" />
		<link href=".\static\assets\global\plugins\bootstrap\css\bootstrap.min.css" rel="stylesheet" type="text/css" />
		<link href=".\static\assets\global\css\components.css" rel="stylesheet" type="text/css" />
		<link href=".\static\assets\admin\pages\css\login.css" rel="stylesheet" type="text/css" />
		<script src=".\static\assets\global\plugins\jquery-1.11.0.min.js" type="text/javascript"></script>
	</head>
	<body >
		<div class="content">
		<h3 class='form-title'>商品列表</h3>
			<div class="table-responsive">
				<table class="table">
					<thead>
						<tr>
							<th>商品名</th>
							<th>商品图片</th>
							<th>商品描述</th>
							<th>商品价格</th>
							<th>商品库存</th>
							<th>商品销量</th>
						</tr>
					</thead>
					<tbody id="containter">

					</tbody>
				</table>
			</div>
		</div>
	</body>
	<script>
		//定义全局商品数组信息
		var g_itemList=[];
		jQuery(document).ready(function(){
				$.ajax({
					type:"GET",
					url:"http://localhost:8080/item/list",
					xhrFields:{withCredentials:true},
					success:function(data){
						if(data.status=="success"){
							g_itemList=data.data;
							reloadDom();
						}else{
							alert("获取商品列表失败，原因为："+data.data.errMsg);
						}
					},
					error:function(data){
						alert("获取商品列表失败，原因为："+data.responseText)
					},
				});
			});
		function reloadDom() {
		    for(var i=0;i<g_itemList.length;i++){
		        var itemVO=g_itemList[i];
                var dom="<tr data-id='"+itemVO.id+"' id='itemDetail"+itemVO.id+"'><td>"+itemVO.title+"</td><td><img style='width: 100px;height: auto' src=' "+itemVO.imgUrl+"'/></td><td>"+itemVO.description+"</td><td>"+itemVO.price+"</td><td>"+itemVO.stock+"</td><td>"+itemVO.sales+"</td></tr>";
				$("#containter").append($(dom));
				$("#itemDetail"+itemVO.id).on("click",function (e) {
					window.location.href="getitem.html?id="+$(this).data("id");
                });
			}

        }
	</script>
</html>